<template>
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>姓名：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改人</button>
  </div>
</template>
<script setup lang="ts">
import {ref, watch} from "vue";
// 数据
let person = ref({
  name: '张三',
  age: 18
})

function changeName() {
  person.value.name += '~'
}

function changeAge() {
  person.value.age += 1
}

function changePerson() {
  person.value = {name: '李四', age: 20}
}
// watch的第一个参数是：被监视的数据
// watch的第二个参数是：监视的回调
// watch的第三个参数是：配置对象（deep,immediate等等）
// 监视，情况二：监视【ref】定义的【对象类型】的数据，监视的是对象的地址值
// 若想监视对象内部属性的变化，需要手动开启深度监视
watch(person, (n, o) => {
  console.log('只能监视到changePerson方法', n, o)
})
//手动开启深度监视
watch(person, (n, o) => {
  console.log('能监视到changeName/changeAge/changePerson方法', n, o)
}, {deep: true})
// 手动开启初次监视（一进页面就调用一次监视）
watch(person, (n, o) => {
  console.log('能监视到changeName/changeAge/changePerson方法', n, o)
}, {deep: true, immediate: true})
</script>
<style scoped>
.person {
  background-color: #e7abab;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>